<!DOCTYPE html>
<html lang="{{@site.locale}}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{meta_title}}</title>
    <link rel="stylesheet" href="{{asset "built/screen.css"}}">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Muli:400,400i,700,700i,800">

    <script>
        if (localStorage.getItem('alto_dark') == 'true') {
            document.documentElement.classList.add('dark-mode');
        }
    </script>

    {{ghost_head}}
</head>

<body class="{{body_class}}">
    <div class="site">
        {{> header}}
        {{#is "home"}}
            {{> featured}}
        {{/is}}
        <div class="site-content">
            {{{body}}}
        </div>
        {{> footer}}
    </div>

    <div class="dimmer"></div>

    <div class="off-canvas">
        <div class="canvas-close">
            <i class="canvas-icon icon icon-window-close"></i>
        </div>
        <div class="mobile-menu"></div>
    </div>

    <script
        src="https://code.jquery.com/jquery-3.5.1.min.js"
        integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
        crossorigin="anonymous">
    </script>
    <script src="{{asset "built/main.min.js"}}"></script>

    {{{block "scripts"}}}

    {{ghost_foot}}
</body>

</html>